import 'package:flutter/material.dart';
import 'MyApp.dart';

//MARK: - 我的布局样式Demo
class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new StarChange(),
    );
  }
}

class StarChange extends StatefulWidget {
  @override
  createState() => new StarState();
}

class StarState extends State<StarChange> {
  var _starCount = 41;

  /* 标题、评星 */
  Widget titleSection() {
    return new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: <Widget>[
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    'Oeschinen Lake Campground',
                    style: new TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                new Text('Kandersteg, Switzerland',
                    style: new TextStyle(
                      color: Colors.grey[500],
                    )
                ),
              ],
            ),
          ),
          new IconButton(
              icon: Icon(_starCount >= 41 ? Icons.star : Icons.star_border,
                  color: Colors.red[500]),
              tooltip: "收藏指数",
              onPressed: () {
                setState(() {
                  if (_starCount >= 41)
                    _starCount = 40;
                  else
                    _starCount = 41;
                });
              }),
          new Text(_starCount.toString()),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    /* 创建上下文字按钮 */
    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new IconButton(
              icon: Icon(icon),
              color: color,
              onPressed: () {
                print("我被点击了：$label");
              }),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
            ),
          )
        ],
      );
    }

    /* 按钮部分 */
    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE')
        ],
      ),
    );

    /* 文本描述部分 */
    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.',
        softWrap: true,
      ),
    );

    return new MaterialApp(
      title: '样式Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
            '样式Demo',
            style: new TextStyle(fontSize: 18.0),
          ),
          actions: <Widget>[
            new IconButton(
                icon: Icon(Icons.arrow_right),
                onPressed: () {
                  Navigator.of(context).push(
                    new MaterialPageRoute(builder: (context) {
                      return MyApp();
                    }),
                  );
                })
          ],
        ),
        body: new ListView(
          children: <Widget>[
//            new Image.network(
//                'https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg',
//                height: 240.0,
//                fit: BoxFit.cover,//图像应该尽可能小，但覆盖整个渲染框
//            ),
            new Image.asset(
              'images/lake.jpg',
              height: 240.0,
              fit: BoxFit.cover, //图像应该尽可能小，但覆盖整个渲染框
            ),
            titleSection(),
            buttonSection,
            textSection
          ],
        ),
      ),
      theme: new ThemeData(primaryColor: Colors.redAccent),
    );
  }
}
